<template>
	<div>
		<div
			v-for="(error,index) in errors"
			:key="index"
			class="lexmis_line"><Icon name="cancel"/>{{error}}</div>
	</div>
</template>

<script>
import Icon from '../icon';

export default {
	name:'TipContent',
	components:{
		Icon,
	},
	props:{
		errors:Array
	},
};
</script>

<style lang="scss">
.lexmis-ValidationProvider{
	display:inline-block;
}
.tippy-box[data-theme~='error-tip']{
	background-color:#fff;
	color:#d61010;
	>.tippy-arrow{
		color:#fff;
		z-index:1;
	}
	>.tippy-content{
		border-radius:4px;
		box-shadow:0 0 10px 0 rgba(12, 12, 12, 0.2);
		padding:0;
		>div{
			padding:10px 20px;
			>.lexmis_line{
				line-height:26px;
				display:flex;
				align-items:flex-start;
				>.lexmis-Icon{
					height:26px;
					flex-shrink:0;
					font-size:20px;
					margin-right:5px;
				}
			}
		}
	}
}
</style>
